<template>
  <div class="card h-80 mt-4">
    <div class="card-header pb-0 p-3">
      <div class="row">
        <div class="col-6 d-flex align-items-center">
          <h6 class="mb-0">工厂举报记录</h6>
        </div>
        <div class="col-6 text-end">
          <vsud-button color="success" size="sm" variant="outline"
            >查看所有</vsud-button
          >
        </div>
      </div>
    </div>
    <div class="card-body p-3 pb-0 mb-0">
      <ul class="list-group">
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <div class="d-flex flex-column">
            <h6 class="mb-1 text-dark font-weight-bold text-sm">
              举报工厂：张三工厂
            </h6>
            <span class="text-xs">压榨员工，万恶资本家</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            2022.5.10
            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
              PDF
            </button>
          </div>
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <div class="d-flex flex-column">
            <h6 class="text-dark mb-1 font-weight-bold text-sm">
              举报工厂：张三工厂
            </h6>
            <span class="text-xs">压榨员工，引起众愤！</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            2022.5.10
            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
              PDF
            </button>
          </div>
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <div class="d-flex flex-column">
            <h6 class="text-dark mb-1 font-weight-bold text-sm">
              举报工厂：张三工厂
            </h6>
            <span class="text-xs">压榨员工，联名上诉！</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            2022.5.10
            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
              PDF
            </button>
          </div>
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
        >
          <div class="d-flex flex-column">
            <h6 class="text-dark mb-1 font-weight-bold text-sm">
              举报工厂：最佳食品厂
            </h6>
            <span class="text-xs">无良食品厂，使用劣质材料生产</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            2022.5.12
            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
              PDF
            </button>
          </div>
        </li>
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg"
        >
          <div class="d-flex flex-column">
            <h6 class="text-dark mb-1 font-weight-bold text-sm">
              举报工厂：东软睿道
            </h6>
            <span class="text-xs">都是同行，凭什么钱不能掰我点</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            2022.5.15
            <button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4">
              <i class="fas fa-file-pdf text-lg me-1" aria-hidden="true"></i>
              PDF
            </button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import VsudButton from "@/components/VsudButton.vue";

export default {
  name: "InvoiceCard",
  components: {
    VsudButton,
  },
};
</script>
